export default {
  name: 'ZSpace',
  props: {
    columnGap: {
      type: String,
      default: '8px'
    },
    rowGap: {
      type: String,
      default: ''
    },
    vertical: {
      type: Boolean,
      default: false
    },
    notLast: {
      type: Boolean,
      default: false
    },
    wrap: {
      type: Boolean,
      default: false
    },
    grid: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String,
      default: 'Bottom'
    }
  },
  computed: {
    $_rowGap() {
      if (this.rowGap) {
        return this.rowGap
      }
      return this.columnGap
    }
  },
  methods: {
    $_renderItems(h) {
      let defaultSlot = this.$slots.default
      let self = this
      if (Array.isArray(defaultSlot)) {
        return (
          defaultSlot.map((item, index) => {
            let styleObj = {

            }
            if (self.vertical) {
              styleObj['margin' + self.direction] = self.$_rowGap
            } else {
              styleObj['marginRight'] = self.columnGap
            }
            if (self.grid) {
              styleObj['margin' + self.direction] = self.rowGap
            }
            if (self.notLast) {
              // console.log(item)
              if (index === defaultSlot.length - 1) {
                if (self.vertical) {
                  delete  styleObj['margin' + self.direction]
                } else {
                  delete  styleObj['marginRight']
                }
              }
            }

            // console.log(styleObj)

            return <div class="z-space__item" style={styleObj}>{item}</div>
          })
        )
      }
    }
  },
  render(h) {
    let styleObj = {
      display: 'flex',
      alignItems: 'center'
    }

    if (this.vertical) {
      delete styleObj.display
    }

    if (this.wrap) {
      styleObj.flexWrap = 'wrap'
    }

    let items = this.$_renderItems(h)

    return (
      <div class="z-space" style={styleObj}>{items}</div>
    )
  },

}
